<#include "/resource.ftl"/>
<style>
    body {
        background: transparent;
    }

    .user {
        display: flex;
        align-items: center;
        background-color: transparent;
        border-bottom: 1px solid #eaeaea;
    }

    .user.checked {
        background-color: #74b2c3;
        color: #ffffff;
    }

    select {
        color: #74b2c3;
        border: 1px solid #74b2c3;
        border-radius: 2px;
    }

    .checkbox {
        display: initial;
    }
</style>
<div id="user-content">
    <div class="second-sidebar" style="overflow: auto;">
    <#list users as user>
        <div class="user" :class="index == ${user_index} ?'checked':''"
             @click="getProfile(${user_index},'${user.id}','${projectId}','${user.realName}')">
            <img src="${user.avatar!'/imgs/default.png'}" onerror="javascript:this.src='/imgs/default.png';"
                 width="50px"
                 height="50px"
                 style="border-radius: 50%;border: 1px solid #e5e4e8;margin: 5px 10px;">
            <div class="item-hidden">
                <div>${user.realName}</div>
                <div style="font-size: 12px;">离线</div>
            </div>
        </div>
    </#list>
    </div>
    <div class="second-content">
        <div style="padding: 12px;background-color: #f5f5f5;min-height: 100%;">
            <div style="font-size: 24px;color: #605ca8;">
                <template v-if="init">{{realName}}的设置&nbsp;</template>
                <template v-else>正在请求</template>
                <button class="btn btn-github" style="font-size: 10px;padding: 4px 8px;" onclick="closeModal()">关闭
                </button>
            </div>
            <hr style="border-color: #e0e0e0"/>
            <template v-if="!requesting">
                <div class="row" style="margin-top: 32px;">
                    <div class="col-xs-12 col-sm-12">
                        <div class="box ">
                            <div class="box-header with-border">
                                <div style="display: flex;align-content: center">
                                    <h3 class="box-title">工作时间</h3>
                                    <div class="model-1" style="margin-left: 8px;">
                                        <div class="switch-checkbox">
                                            <input type="checkbox"  v-model="settings.useWorktime"/>
                                            <label></label>
                                        </div>
                                    </div>
                                </div>
                                <div class="box-tools pull-right">

                                    <button type="button" class="btn btn-box-tool dropdown-toggle"
                                            data-toggle="dropdown">
                                        <i class="fa fa-wrench"></i></button>
                                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                            class="fa fa-minus"></i>
                                    </button>
                                </div>
                            </div>
                            <!-- /.box-header -->
                            <div class="box-body ">

                                <div style="color: #565656">
                                    <div class="checkbox"><label><input type="checkbox"
                                                                        v-model="settings.worktime[0].weekday[0]">星期一</label>
                                    </div>
                                    <div class="checkbox"><label><input type="checkbox"
                                                                        v-model="settings.worktime[0].weekday[1]">星期二</label>
                                    </div>
                                    <div class="checkbox"><label><input type="checkbox"
                                                                        v-model="settings.worktime[0].weekday[2]">星期三</label>
                                    </div>
                                    <div class="checkbox"><label><input type="checkbox"
                                                                        v-model="settings.worktime[0].weekday[3]">星期四</label>
                                    </div>
                                    <div class="checkbox"><label><input type="checkbox"
                                                                        v-model="settings.worktime[0].weekday[4]">星期五</label>
                                    </div>
                                    <div class="checkbox"><label><input type="checkbox"
                                                                        v-model="settings.worktime[0].weekday[5]">星期六</label>
                                    </div>
                                    <div class="checkbox"><label><input type="checkbox"
                                                                        v-model="settings.worktime[0].weekday[6]">星期日</label>
                                    </div>
                                </div>
                                <div style="margin-top: 8px;">
                                    <select v-model="settings.worktime[0].time[0]">
                                        <template v-for="n in 24">
                                            <option>
                                                <template v-if="n<=10">0</template>{{n-1}}
                                            </option>
                                        </template>
                                    </select>
                                    :
                                    <select v-model="settings.worktime[0].time[1]">
                                        <template v-for="n in 60">
                                            <option>
                                                <template v-if="n<=10">0</template>{{n-1}}
                                            </option>
                                        </template>
                                    </select>
                                    &nbsp;至&nbsp;
                                    <select v-model="settings.worktime[0].time[2]">
                                        <template v-for="n in 24">
                                            <option>
                                                <template v-if="n<=10">0</template>{{n-1}}
                                            </option>
                                        </template>
                                    </select>
                                    :
                                    <select v-model="settings.worktime[0].time[3]">
                                        <template v-for="n in 60">
                                            <option>
                                                <template v-if="n<=10">0</template>{{n-1}}
                                            </option>
                                        </template>
                                    </select>
                                </div>
                            </div>
                            <!-- /.box-body -->
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-12">
                        <div class="box ">
                            <div class="box-header with-border">
                                <div style="display: flex;align-content: center">
                                    <h3 class="box-title">自动回复</h3>
                                    <div class="model-1" style="margin-left: 8px;">
                                        <div class="switch-checkbox">
                                            <input type="checkbox" v-model="settings.useAutoreply"/>
                                            <label></label>
                                        </div>
                                    </div>
                                </div>
                                <div class="box-tools pull-right">
                                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                            class="fa fa-minus"></i>
                                    </button>
                                </div>
                            </div>
                            <!-- /.box-header -->
                            <div class="box-body ">
                                <ul class="todo-list ui-sortable">
                                    <template v-for="(item,index) in settings.autoreply">

                                        <li class="">
                                            <label style="display: flex;"><input type="checkbox" value="">
                                            <span class="text">{{index+1}}.{{item.content}}</span>
                                            <div class="tools">
                                                <i class="fa fa-edit"></i>
                                                <i class="fa fa-trash-o"></i>
                                            </div>
                                            </label>
                                        </li>
                                    </template>
                                </ul>
                            </div>
                            <!-- /.box-body -->
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-12">
                        <div class="box ">
                            <div class="box-header with-border">
                                <div style="display: flex;align-content: center">
                                    <h3 class="box-title">欢迎语</h3>
                                    <div class="model-1" style="margin-left: 8px;">
                                        <div class="switch-checkbox">
                                            <input type="checkbox" v-model="settings.useWelcome"/>
                                            <label></label>
                                        </div>
                                    </div>
                                </div>
                                <div class="box-tools pull-right">
                                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                            class="fa fa-minus"></i>
                                    </button>
                                </div>
                            </div>
                            <!-- /.box-header -->
                            <div class="box-body ">
                            <textarea class="form-control" style="max-width: 100%;border:none;min-height: 120px;"
                                      placeholder="请输入欢迎语…">{{settings.welcome[0].content}}</textarea>
                            </div>
                            <!-- /.box-body -->
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-12">
                        <div class="box ">
                            <div class="box-header with-border">
                                <div style="display: flex;"><h3 class="box-title">快捷回复</h3><small class="label bg-red" style="margin-left: 8px;">新增</small></div>
                                <div class="box-tools pull-right">
                                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                            class="fa fa-minus"></i>
                                    </button>
                                </div>
                            </div>
                            <!-- /.box-header -->
                            <div class="box-body ">

                                <ul class="todo-list ui-sortable">
                                    <template v-for="(item,index) in settings.quickreply">

                                        <li class="">
                                            <label style="display: flex;" v-if="item.edit">
                                                <input style="border: none;background: transparent;box-shadow: none;outline: none;width: 100%;" type="text" placeholder="请输入内容…" v-model="item.content">
                                                <button class="btn bg-red" style="padding: 2px 4px;font-size: 9px;">更新</button>
                                            </label>
                                            <label style="display: flex;" v-else>
                                                <span class="text">{{index+1}}.{{item.content}}</span>
                                                <div class="tools">
                                                    <i class="fa fa-edit" @click="editQuickreply(index)"></i>
                                                    <i class="fa fa-trash-o"></i>
                                                </div>
                                            </label>
                                        </li>
                                    </template>
                                    <li class="" v-if="addQuickreply">
                                        <label style="display: flex;">
                                            <input style="border: none;background: transparent;box-shadow: none;outline: none;width: 100%;" type="text" placeholder="请输入内容…" value="">
                                            <button class="btn bg-red" style="padding: 2px 4px;font-size: 9px;">提交</button>
                                        </label>
                                    </li>
                                </ul>
                            </div>
                            <!-- /.box-body -->
                        </div>
                    </div>
                </div>
            </template>
        </div>
    </div>
</div>
<script src="/js/app.js"></script>
<script>
    function closeModal() {
        $(parent.window.document).find('#setting-modal').fadeOut('fast');
    }
    function applySetting() {

    }
    var xhr;
    var vm = new Vue({
        el: '#user-content',
        data: {
            checked: true,
            index: 0,
            init: false,
            requesting: true,
            realName:'',
            addQuickreply:false,
            settings: {
                useWelcome: 0,
                useWorktime: 0,
                useAutoreply: 0,
                worktime: [{
                    weekday: 127,
                    start: 61,
                    end: 1439
                }],
                autoreply: [],
                quickreply: [],
                welcome:[{
                    content: ""
                }]
            }
        },
        created: function () {
            // `this` 指向 vm 实例
        },
        mounted: function () {
            this.settings = this.convertSetting(this,this.settings);
            $('.user.checked').trigger('click');
        },
        methods: {
            editQuickreply:function (index) {
                this.settings.quickreply[index]['edit'] = true;
            },
            convertSetting: function (that, setting) {
                if(setting == null){
                    setting = {
                        useWelcome: false,
                        useWorktime: false,
                        useAutoreply: false,
                        worktime: [{
                            weekday: 127,
                            start: 0,
                            end: 1439
                        }],
                        autoreply: [],
                        quickreply: [],
                        welcome:[{
                            content: ""
                        }]
                    };
                }
                var weekday = that.convertWeekday(setting.worktime[0].weekday);
                var time = that.convertTime(setting.worktime[0].start, setting.worktime[0].end);
                for (var i = 0; i < setting.quickreply.length; i++) {
                    setting.quickreply[i].edit = false;
                }
                for (var i = 0; i < setting.autoreply.length; i++) {
                    setting.autoreply[i].edit = false;
                }
                setting.worktime[0].weekday = weekday;
                setting.worktime[0].time = time;
                return setting;
            }
            ,
            getProfile: function (index, userId, projectId, realName) {
                this.index = index;
                var that = this;
                that.init = true;
                that.requesting = true;
                that.realName = realName;
                $.post('/project/selectSetting',{userId:userId,projectId:projectId},function (setting) {
                    that.requesting = false;
                    that.settings = that.convertSetting(that, setting);
                },'json');

            }
            ,
            convertWeekday: function (_weekday) {
                var weekday = [];
                for (var i = 0; i < 7; i++) {
                    if ((_weekday & (1 << i)) == 0) {
                        weekday.push(false);
                    } else {
                        weekday.push(true);
                    }
                }
                return weekday;
            },
            convertTime: function (start,end) {
                var time = [];
                time.push(parseInt(start / 60));
                time.push(start % 60);
                time.push(parseInt(end / 60));
                time.push(end % 60);
                return time;
            }
        },
        watch: {}
    });
</script>